<template>

    <div class="dialog-com">
        <el-dialog v-model="dialogVisible" align-center center @close="close" :title="title" :width="width" :height="height"
            :show-close="showClose" :draggable="draggable" :destroy-on-close="destroyOnClose"
            :close-on-click-modal="false" style='
             overflow: hidden; 
             background-color: #fff;
             border: 1px solid #434548;
             color: black;
             padding: 0;
             '>
            <slot name="content"></slot>
            <template #footer v-if="showFooter">
                <div class="dialog-footer">
                    <el-button class="common-btn" @click="close">取消</el-button>
                    <el-button class="common-btn" @click="confirm">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import {computed } from 'vue'

const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    width: {
        type: String,
        default: '528px'
    },
    height:{
        type:String,
        default:'580px'
    },
    visible: {
        type: Boolean,
        default: false
    },
    draggable: {
        type: Boolean,
        default: true
    },
    destroyOnClose: {
        type: Boolean,
        default: true,
        required: false
    },
    close: {
        type: Boolean,
        default: false,
        required: false
    },
    showClose: {
        type: Boolean,
        default: false,
        required: false
    },
    showFooter: {
        type: Boolean,
        default: true,
        required: false
    },
})

const emit = defineEmits(['close', 'confirm'])
const dialogVisible = computed(() => {
    return props.visible
})
const close = () => {
    emit('close')
}
const confirm = () => {
    emit('confirm')
}


</script>
<style scoped>
:deep(.el-dialog.is-draggable .el-dialog__header) {
    border-bottom: 1px solid #434548;
    padding: 0;
    height: 60px;
    line-height: 60px;

}

:deep(.el-dialog__title) {
    color: black;

}

.dialog-footer {
    padding-bottom: 20px;
}

.dialog-footer button {
    border: 1px solid var(--primary-gray-color);
    width: 100px;
    height: 40px;
    /* background-color: transparent;
    color: var(--primary-blue-color); */

}

/* .dialog-footer button:hover {
    color: var(--primary-white-color);
    background-color: var(--primary-blue-color);
    border: none;
} */

:deep(.el-dialog--center .el-dialog__body) {
    padding: 30px 30px 10px 30px;
    color: black !important;

}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #1b1c1c;
    color: black !important;
    box-shadow:  0 0 0 1px #2f3134 inset ;
}
</style>